<template>
	<view class="main">
		<custom @showTopDailog="showTopDailog" @getContent="getContent"></custom>
		<view class="main_containers">
			<pageTitle name="NEWS" :navBarArr="navBarArr"></pageTitle>
			<view class="main_containers_news">
				<view class="main_containers_news_top">
					<view class="main_containers_news_top_title">
						NEWS CATEGORY
					</view>
					<view class="main_containers_news_top_title_dec">
						
						<view class="main_containers_news_top_title_dec_item display_flex"  v-for="(item,index) in classArr" :key="index" @tap="changeType(item)">
							<view class="main_containers_news_top_title_dec_item_name">	{{item.name}}</view>
						
							<view class="main_containers_news_top_title_dec_item_text" v-if="index!=classArr.length-1"></view>
						</view>
					</view>
				</view>
				<view class="main_containers_news_top">
					<view class="main_containers_news_top_title">
						ARCHIVE
					</view>
					<view class="main_containers_news_top_title_dec">
						
						<view class="main_containers_news_top_title_dec_item display_flex"   v-for="(item,index) in timeArr" :key="index" @tap="changeTime(item)">
							<view class="main_containers_news_top_title_dec_item_name">	{{item}}</view>
						
							<view class="main_containers_news_top_title_dec_item_text" v-if="index!=timeArr.length-1"></view>
						</view>
					</view>
				</view>
				<!-- 列表 -->
				<view class="main_containers_news_list">
					<view class="main_containers_news_list_item" v-for="(item, index) in itemArr" :key="index" @tap="goNewsDetail(item)">
						<view class="main_containers_news_list_item_top">
							<text class="main_containers_news_list_item_top_time">{{item.createTime}}</text>
							<text class="main_containers_news_list_item_top_label">{{item.souceName}}</text>
						</view>
						<view class="main_containers_news_list_item_title">
							{{item.title}}
						</view>
						<view class="main_containers_news_list_item_line">
							
						</view>
					</view>
				</view>
				<view class="pagingContainers">
					<paging :total="total" :pageSize='10' :first="false" v-model="curren" @changes="dd">
						<template slot="arrow-left">
							<uni-icons type="arrowleft" size="15" color="#333"></uni-icons>
						</template>
						<template slot="arrow-right">
							<uni-icons type="arrowright" size="15" color="#333"></uni-icons>
						</template>
					</paging>
				</view>
				
			</view>
		</view>
		<footerContainer></footerContainer>
		<!-- 弹窗 -->
		<topDailog v-if="topDailogStatus" @closed="topDailogStatus=false"></topDailog>

	</view>
</template>

<script>
	import {
		getItem,
		setItem,
		clearStorage
	} from '@/utils/storage.js'
	import topDailog from '@/components/common/topDailog.vue';
	import pageTitle from '@/components/common/pageTitle.vue';
	import footerContainer from '@/components/common/footer.vue';
	import paging from '@/components/common/yang-paging/yang-paging.vue';
	import uniIcons from "@/components/common/uni-icons/uni-icons.vue"
	import {
		mapMutations
	} from 'vuex'


	export default {
		components: {
			topDailog,
			footerContainer,
			pageTitle,
			paging,
			uniIcons
		},
		data() {
			return {
				isrefresh:false,
				total: 0,
				curren: 1,
				itemArr:[
				
				],
				navBarArr:[
					{
						id:'1',
						name:"首页"
					},
					{
						id:'2',
						name:"新闻"
					}
				],
				classArr:[
					{
						id:1,
						name:'主题'
					},
					{
						id:2,
						name:'艺术家'
					},
					{
						id:3,
						name:'门票'
					},
					{
						id:4,
						name:'商品'
					},
					{
						id:'',
						name:'全部'
					},
				],
				timeArr:[
					
				],
				
				topDailogStatus: false,
                params:{
					pageNumber:1,
					pageSize:10,
					goodId:'',
					souce:'',
					archiveMonth:''
				}
			}
		},
		onShow() {
			if(getItem('customObj')){
                let objData=getItem('customObj')
				this.params.goodId=objData.id
		    }
			this.getarchiveMonthList()
			this.getgoodList()
		},
		onLoad(options) {
			// setTimeout(()=>{
			// 	this.total = 300
			// },2000)

		},
		onReady() {
  


		},
		methods: {
			getContent(data) {
				let that = this
				let objData=getItem('customObj')
				this.params.goodId=objData.id
				// 设置一个1000毫秒后执行的定时器
				setTimeout(function() {
					
					that.clearList()
				}, 500);
			
			},
			getarchiveMonthList(){
				this.timeArr = []
				this.$http.Post(`${this.$api.archiveMonthList}`, {}, (res) => {
					console.log(res)
					let data = res
					this.timeArr =data		
				})
			},
			clearList(){
				this.curren=1
				this.getgoodList()
			},
			changeType(data){
				this.params.souce=data.id
				this.clearList()
			},
			changeTime(data){
				this.params.archiveMonth=data
				this.clearList()
			},
			getgoodList() {
				this.itemArr = []
				 this.params.pageNumber=this.curren
				this.$http.Post(`${this.$api.newsList}`, this.params, (res) => {
					console.log(res)
					let data = res.content
			         data.forEach(item => {
			         	if(item.souce==1){
							item.souceName='主题'
						}else if(item.souce==2){
							item.souceName='艺术家'
						}else if(item.souce==3){
							item.souceName='门票'
						}else if(item.souce==4){
							item.souceName='商品'
						}
						this.itemArr.push(item)
			         })
					
					this.total = res.totalElements
			
					
			
				})
			},
			goNewsDetail(item){
				uni.navigateTo({
					url: '/pages/news/detail?id='+item.id
				});
			},
			dd(index) {
				this.curren = index
				this.getgoodList()
			},
		
			showTopDailog() {
				this.topDailogStatus = true
			}
		},
	}
</script>

<style scoped lang="scss">
	.main {
		min-height: 100vh;
		position: relative;
		padding-bottom: 320rpx;
		background-image: url("../../static/bg_middle.png");
		background-size:100% 100%;
        &_containers{
			&_news{
				padding:0 32rpx;
				&_top{
					margin-top:20rpx;
					&_title{
						font-size:48rpx;
						line-height: 60rpx;
						font-weight:700;
						&_dec{
							display:flex;
							align-items: center;
							flex-wrap: wrap;
						&_item{
							font-size:28rpx;
							&_text{
								margin:0 16rpx;
								width:2rpx;
								height:26rpx;
								background:rgba(0, 0, 0, 0.80);
							}
						}
					}
					
				}
			}
			&_list{
				margin-top:60rpx;
				&_item:first-child{
					padding-top:0rpx;
				}
				&_item{
					padding-top:20rpx;
					&_top{
						line-height: 40rpx;
						&_time{
							font-size:28rpx;
							color:rgba(51, 51, 51, 1);
						}
						&_label{
							font-size: 28rpx;
							margin-left:20rpx;
							color:rgba(234, 11, 42, 1);
							font-weight:700;
						}
					}
					&_title{
						margin-top:6rpx;
						font-size:28rpx;
						color:rgba(51, 51, 51, 1);
						line-height: 40rpx;
						font-weight:700;
					}	
					&_line{
						margin-top:6rpx;
						width:100%;
						height:2rpx;
						background:rgba(0, 0, 0, 1);
					}
				}
			}
			.pagingContainers{
				margin:20rpx 0;
			}
			
		}
	}
	}
</style>